@charset "utf-8";
@import "common";
body {
    .LayaFlash {
        background-color: #8bc01f;
        >.container {
            background-image: url(../img/layafamily/LayaFlash.png);
            background-repeat: no-repeat;
            background-position: 100% calc(100% - 60px);
            padding-bottom: 94px;
            @media(max-width: 992px) {
                background-image: none;
            }
            .lf-box {
                .lf-textbox {
                    >.row {
                        .lf-headline {
                            display: flex;
                            align-items: center;
                            margin-top: 67px;
                            >div:first-child {
                                width: 55px;
                                height: 53px;
                                font-size: 48px;
                                color: #8bc01f;
                                background-color: white;
                                margin-right: 12px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                border-radius: 2px;
                            }
                            >h1 {
                                font-size: 48px;
                                color: white;
                                margin: 0;
                            }
                        }
                        .lf-textcontent {
                            left: 2.8%;
                            >h3 {
                                font-size: 24px;
                                color: white;
                                margin-top: 23px;
                                margin-bottom: 68px;
                            }
                            >p {
                                color: white;
                                margin-bottom: 32px;
                            }
                            >button {
                                width: 100px;
                                height: 34px;
                                background-color: #e8f2d2;
                                color: #92c333;
                                border: none;
                                border-radius: 3px;
                            }
                        }
                    }
                }
            }
        }
    }
    .LayaPlayer {
        background-color: #3393df;
        >.container {
            background-image: url(../img/layafamily/LayaPlayer_02.png), url(../img/layafamily/LayaPlayer_01.png);
            background-repeat: no-repeat;
            background-position: calc(100% - 24px) calc(100% - 60px), 0 calc(0% + 138px);
            padding-bottom: 134px;
            @media(max-width: 992px) {
                background-image: none;
            }
            .lp-box {
                .lp-headlinebox {
                    >.row {
                        .lp-headline {
                            display: flex;
                            align-items: center;
                            margin-top: 74px;
                            >div:first-child {
                                width: 55px;
                                height: 53px;
                                font-size: 48px;
                                color: #3393df;
                                background-color: white;
                                margin-right: 12px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                border-radius: 2px;
                            }
                            >h1 {
                                font-size: 48px;
                                color: white;
                                margin: 0;
                            }
                        }
                    }
                }
                .lp-textbox {
                    >.row {
                        .lp-textcontent {
                            @media(max-width: 992px) {
                                margin-left: 0;
                            }
                            >h3:first-child {
                                font-size: 24px;
                                color: white;
                                margin-top: 43px;
                                margin-bottom: 18px;
                            }
                            >p {
                                color: white;
                                margin-bottom: 0;
                                line-height: 30px;
                            }
                            >h3:nth-child(3) {
                                font-size: 24px;
                                color: white;
                                margin-top: 33px;
                                margin-bottom: 18px;
                            }
                        }
                    }
                }
            }
        }
    }
    .LayaAir_layaOpen {
        padding-bottom: 86px;
        >.container {
            .LayaAir-layaOpen-box {
                .LayaAir-box {
                    >.row {
                        .la-headline {
                            display: flex;
                            align-items: center;
                            margin-top: 91px;
                            >div:first-child {
                                width: 55px;
                                height: 53px;
                                font-size: 48px;
                                color: white;
                                background-color: #3393df;
                                margin-right: 12px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                border-radius: 2px;
                            }
                            >h1 {
                                font-size: 48px;
                                color: #3393df;
                                margin: 0;
                            }
                        }
                        .la-textcontent {
                            >h3 {
                                font-size: 18px;
                                color: #5d5d5d;
                                margin-top: 24px;
                            }
                            >p {
                                font-size: 14px;
                                color: #5d5d5d;
                                text-indent: 2em;
                                margin: 0;
                            }
                            >h4 {
                                margin-top: 37px;
                                margin-bottom: 21px;
                                font-size: 18px;
                                color: #3393df;
                            }
                            .la-wing {
                                margin-top: 40px;
                                >div {
                                    margin: 0 auto;
                                    width: 141px;
                                    height: 141px;
                                    >img {
                                        width: 100%;
                                        height: 100%;
                                    }
                                }
                            }
                        }
                    }
                }
                .layaOpen-box {
                    >.row {
                        .lo-headline {
                            display: flex;
                            align-items: center;
                            margin-top: 91px;
                            >div:first-child {
                                width: 55px;
                                height: 53px;
                                font-size: 48px;
                                color: white;
                                background-color: #3393df;
                                margin-right: 12px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                border-radius: 2px;
                            }
                            >h1 {
                                font-size: 48px;
                                color: #3393df;
                                margin: 0;
                            }
                        }
                        .lo-textcontent {
                            >h3 {
                                font-size: 18px;
                                color: #5d5d5d;
                                margin-top: 24px;
                            }
                            >p {
                                font-size: 14px;
                                color: #5d5d5d;
                                text-indent: 2em;
                                margin: 0;
                            }
                            >h4 {
                                margin-top: 37px;
                                margin-bottom: 21px;
                                font-size: 18px;
                                color: #3393df;
                            }
                            >h4:nth-child(4) {
                                margin-top: 56px;
                            }
                            .lo-wing {
                                margin-top: 40px;
                                >div {
                                    margin: 0 auto;
                                    width: 145px;
                                    height: 140px;
                                    >img {
                                        width: 100%;
                                        height: 100%;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .LayaStorer_LayaPublish {
        padding-bottom: 86px;
        background-color: #f7f7f7;
        >.container {
            .LayaStorer-LayaPublish-box {
                .LayaStorer-box {
                    >.row {
                        .ls-headline {
                            display: flex;
                            align-items: center;
                            margin-top: 89px;
                            >div:first-child {
                                width: 55px;
                                height: 53px;
                                font-size: 48px;
                                color: white;
                                background-color: #3393df;
                                margin-right: 12px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                border-radius: 2px;
                            }
                            >h1 {
                                font-size: 48px;
                                color: #3393df;
                                margin: 0;
                            }
                        }
                        .ls-textcontent {
                            >h3 {
                                font-size: 18px;
                                color: #5d5d5d;
                                margin-top: 24px;
                            }
                            >p {
                                font-size: 14px;
                                color: #5d5d5d;
                                text-indent: 2em;
                                margin: 0;
                            }
                            >h4 {
                                margin-top: 37px;
                                margin-bottom: 21px;
                                font-size: 18px;
                                color: #3393df;
                            }
                            .ls-wing {
                                margin-top: 40px;
                                >div {
                                    margin: 0 auto;
                                    width: 162px;
                                    height: 153px;
                                    >img {
                                        width: 100%;
                                        height: 100%;
                                    }
                                }
                            }
                        }
                    }
                }
                .LayaPublish-box {
                    >.row {
                        .lp-headline {
                            display: flex;
                            align-items: center;
                            margin-top: 89px;
                            >div:first-child {
                                width: 55px;
                                height: 53px;
                                font-size: 48px;
                                color: white;
                                background-color: #3393df;
                                margin-right: 12px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                border-radius: 2px;
                            }
                            >h1 {
                                font-size: 48px;
                                color: #3393df;
                                margin: 0;
                            }
                        }
                        .lp-textcontent {
                            >h3 {
                                font-size: 18px;
                                color: #5d5d5d;
                                margin-top: 24px;
                            }
                            >p {
                                font-size: 14px;
                                color: #5d5d5d;
                                text-indent: 2em;
                                margin: 0;
                            }
                            >h4 {
                                margin-top: 37px;
                                margin-bottom: 21px;
                                font-size: 18px;
                                color: #3393df;
                            }
                            >h4:nth-child(4) {
                                margin-top: 56px;
                            }
                            .lp-wing {
                                margin-top: 40px;
                                >div {
                                    margin: 0 auto;
                                    width: 137px;
                                    height: 137px;
                                    >img {
                                        width: 100%;
                                        height: 100%;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}